import 'package:flutter/material.dart';

class SongWidget extends StatelessWidget {
  const SongWidget({
    super.key,
    this.imgUrl = '',
    this.name = '',
    this.subheading = '',
    this.status = 2,
    this.onTap,
    this.showBottomSheet,
  });

  final String imgUrl;
  final String name;
  final String subheading;
  final int status;
  final GestureTapCallback? onTap;
  final GestureTapCallback? showBottomSheet;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      key: key,
      child: Container(
        alignment: Alignment.centerLeft,
        margin: const EdgeInsets.fromLTRB(11, 0, 14, 7),
        padding: const EdgeInsets.all(7),
        decoration: BoxDecoration(
          color: const Color(0xFF2C2B30),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Container(
              margin: const EdgeInsets.only(right: 18),
              height: 65,
              width: 65,
              decoration: BoxDecoration(
                color: const Color(0xFF626262),
                borderRadius: BorderRadius.circular(10),
                image: imgUrl.isNotEmpty
                    ? DecorationImage(
                        image: NetworkImage(imgUrl), // 也可以使用 AssetImage 对于本地图片
                        fit: BoxFit.cover,
                      )
                    : null,
              ),
              child: imgUrl.isEmpty
                  ? Center(
                      child: Text(
                        status == 1 ? '生成中\n1-3分钟' : '生成\n失败',
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 10,
                        ),
                      ),
                    )
                  : null,
            ),
            Expanded(
              flex: 1,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  name.isNotEmpty
                      ? Text(
                          name,
                          maxLines: 1,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            color: Color(0xFFFFFFFF),
                            fontSize: 14,
                            height: 1.4,
                            fontWeight: FontWeight.bold,
                          ),
                        )
                      : Container(
                          height: 10,
                          width: 165,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            gradient: const LinearGradient(
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                              colors: [Color(0xFF616161), Color(0x008C8C8C)],
                            ),
                          ),
                        ),
                  const SizedBox(height: 1),
                  subheading.isNotEmpty
                      ? SizedBox(
                          child: Text(
                            subheading,
                            maxLines: 2,
                            softWrap: true,
                            overflow: TextOverflow.ellipsis,
                            style: const TextStyle(
                              color: Color(0xFFCBCBCB),
                              fontSize: 12,
                              height: 1.36,
                            ),
                          ),
                        )
                      : Container(
                          height: 10,
                          width: 165,
                          margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            gradient: const LinearGradient(
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                              colors: [Color(0xFF616161), Color(0x008C8C8C)],
                            ),
                          ),
                        ),
                ],
              ),
            ),
            Offstage(
              offstage: name.isNotEmpty,
              child: GestureDetector(
                child: Container(
                  padding: const EdgeInsets.all(14),
                  child: Image.asset(
                    'assets/images/more.png',
                    height: 18,
                    width: 5,
                  ),
                ),
                onTap: () {
                  showBottomSheet!();
                },
              ),
            ),
          ],
        ),
      ),
      onTap: () {
        if (onTap != null) {
          onTap!();
        }
      },
    );
  }
}
